<template>
    <div class="outmain ba_f">
        <el-tabs v-model="activeName2" type="card" @tab-click="handleTabClick2">
          <el-tab-pane label="外卖商品" name="1"></el-tab-pane>
          <el-tab-pane label="外卖商品分类" name="2" v-if="storeData.goodsModel=='3'"></el-tab-pane>
        </el-tabs>
        <div class="shuju_title mar_b20 mar_t20">
            <div class="shuju_title_text">
                <span>商品分类</span>
            </div>
        </div>
        <div>
            <el-button type="primary" size="medium" @click="handleEdit">新增分类</el-button>
            <el-button size="medium" @click="handleDelete">批量删除</el-button>
        </div>
        <div class="tabledata mar_t20 goodclass">
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    :element-loading-text="elementLoadingText"
                    stripe
                    row-key="id"
                    style="width: 100%"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    @selection-change="setSelectRows">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序"
                >
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="分类ID"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="分类名称"
                        width="390"
                >
                    <template slot-scope="scope">
                        <div class="">
                          {{scope.row.name}}
                            <el-tag size="medium" type="danger" v-show="scope.row.isRequire && scope.row.isRequire=='1'">必选</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="icon"
                        label="分类图标"
                >
                    <template slot-scope="scope">
                        <div class="flex flex-y-top">
                            <img
                                    class="goodlogo bor_rad5"
                                    :src="scope.row.icon"/>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="shijianduan"
                        label="分类时间段"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.timeType=='1'">不限制</div>
                        <div v-else>
                            <div v-if="scope.row.startTime">{{scope.row.startTime}}-{{scope.row.endTime}}</div>
                            <div>{{scope.row.weekStr && scope.row.weekStr.map((item) => item).join()}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="spfl"
                        label="启用状态"
                >
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                   @change="changeSwitch(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="kc"
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button v-if="scope.row.pid==0" type="text" @click="handleEdit2(scope.row.id)">新增二级分类
                            </el-button>
                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
            <edit ref="edit" @fetchData="fetchData"></edit>
        </div>

    </div>
</template>
<script>
    // import {showConfirm} from "@/utils/config";
    import Edit from "../../../views/good/components/goodclassedit";
    import {categoryDel, categoryList, changeCategorySwitch} from "@/api/good";
    import Sortable from 'sortablejs'
    import {mapState} from "vuex";

    export default {
        components: {Edit},
        computed: {
            ...mapState(['storeId','storeData']),
        },
        created() {
            this.fetchData();
        },
        data() {
            return {
                activeName2: '2',
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await categoryList({page: this.page.currentPage,storeId:this.storeId,});
                this.list = data;
                this.page.total = count;
                setTimeout(() => {
                    this.listLoading = false;
                }, 300);
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await categoryDel({id: row.id,storeId:this.storeId});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await categoryDel({id,storeId:this.storeId});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            // rowDrop () {
            //   const tbody = document.querySelector('.el-table__body-wrapper tbody')
            //   const _this = this
            //   Sortable.create(tbody, {
            //     onEnd ({ newIndex, oldIndex }) {
            //       console.log(newIndex,oldIndex)
            //       const currRow = _this.tableData.splice(oldIndex, 1)[0]
            //       _this.tableData.splice(newIndex, 0, currRow)
            //       this.tableData=_this.tableData
            //     }
            //   })
            // },
            handleEdit(row) {
                if (row.id) {
                    this.$refs["edit"].showEdit(row);
                } else {
                    this.$refs["edit"].showEdit();
                }
              this.$refs["edit"].setStoreId(this.storeId);
            },
            handleEdit2(pid) {
                this.$refs["edit"].showEdit2(pid);
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            handleTabClick2() {
              if (this.activeName2 == '1') {
                this.$router.push(`/storegoodlist`);
              } else if(this.activeName2=='2'){
                this.$router.push(`/storegoodclassify`);
              }
            },
            async changeSwitch(row) {
                const {msg} = await changeCategorySwitch({id: row.id, display: row.display,storeId:this.storeId});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
        }
    }
</script>
